<template>
    <div>
        <b-header :back="true" :home="true">
            <span></span>
        </b-header>
        <div class="con">
            <dl class="l-r-item">
                <dt>
                    <img :src="detailObj.cover" alt="">
                </dt>
                <dd>
                    <span>{{detailObj.title}}</span>
                </dd>
            </dl>
            <button @click="$router.push({name:'read',params:{fiction_id:detailObj.fiction_id}})">开始阅读</button>
        </div>
    </div>
</template>
<script>
import bHeader from '../components/b-header'
export default {
    components:{
        bHeader
    },
    data(){
        return {
            detailObj:{}
        }
    },
    // 组件内导航守卫
    // watch:{
    //     '$route.params.fiction_id'(newVal,oldVal){
    //         this.getData();
    //     }
    // },  
    // beforeRouteEnter (to, from, next) {
    //     let uid = window.localStorage.getItem('uid') || '';
    //     if(uid){
    //         next();
    //     }else{
    //         next('/login')
    //     }
    // },
    beforeRouteUpdate (to,from,next){
        this.getData(to.params.fiction_id);
    },
    beforeRouteLeave(to,from,next){
        let result = window.confirm('您确定要离开吗？');
        if(result){
            next()
        }
    },
    created(){
        this.getData(this.$route.params.fiction_id);
    },
    methods:{
        getData(fiction_id){
                this.$http.get('/api/detail',{params:{fiction_id:fiction_id}}).then((res) => {
                if(res.data.code === 1){
                    this.detailObj = res.data.data.item;
                }
            })
        }
    }
}
</script>
<style lang="scss">
    .l-r-item{
        display: flex;
        dt{
            width:80px;
            height:100px;
            margin-right:10px;
            img{
                width:100%;
                height:100%;
            }
        }
    }
</style>
